<template>
  <div id="home">
    <el-row>
      <el-col :span="4">
        <div class="grid-content bg-purple">饮食常识网站
</div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">
          <el-input v-model="keys" class="search" />
          <el-button type="success" @click="onSearch">搜索</el-button>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light" @click="coupleBack">反馈</div>
      </el-col>

      <el-dialog
        title="反馈"
        :visible.sync="dialogTableVisible1"
        center
        :append-to-body="true"
        :lock-scroll="false"
        width="30%"
      >
        <section>
          <el-container>
            <el-form label-width="120px" :model="CoupleBack" ref="CoupleBack">
              <el-row>
                <el-col>
                  <el-form-item label="问题和意见">
                    <el-input type="textarea" v-model="CoupleBack.issue"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col>
                  <el-form-item label="手机号码">
                    <el-input v-model="CoupleBack.phone"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-container>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm()">提 交</el-button>
          </div>
        </section>
      </el-dialog>

      <el-col :span="4">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple-light" v-if='this.$store.state.isLogin'>
          <span @click="loginOpen">登录</span>/
          <span @click="registOpen">注册</span>
        </div>

         <div class="grid-content bg-purple-light"  v-if='!this.$store.state.isLogin'>
          <span @click="registOpen">用户名:  {{loginusername}}</span>
        </div>
      </el-col>
    </el-row>

  

    <el-dialog title="登录" :visible.sync="dialogFormVisibleLogin">
      <el-form :model="user">
        <el-form-item label="用户名" label-width=" 80px">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="80px">
          <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template>
        <el-alert v-show="loginError == 1" title type="success">{{errorMsg}}</el-alert>
      </template>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleLogin = false">取 消</el-button>
        <el-button type="primary" @click="Login">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="注册" :visible.sync="dialogFormVisibleRegist">
      <el-form :model="user">
        <el-form-item label="用户名" label-width="100px">
          <el-input v-model="user.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="100px">
          <el-input v-model="user.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="再次输入密码" label-width="100px">
          <el-input v-model="user.twopassword" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template>
        <el-alert v-show="registError == 1" title type="success">{{errorMsg}}</el-alert>
      </template>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRegist = false">取 消</el-button>
        <el-button type="primary" @click="regist">注册</el-button>
      </div>
    </el-dialog>

    <div calss="tablesSt">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="首页" name="first">
          <!-- <Goods /> -->
        </el-tab-pane>

        <el-tab-pane label="论坛" name="second">
          <!-- <Bbs /> -->
        </el-tab-pane>
        <el-tab-pane label="我的" name="third"  >
          <!-- <My /> -->
        </el-tab-pane>
      </el-tabs>
    </div>

    <router-view :setshowlogin="setshowlogin"></router-view>
  </div>
</template>

<script>
import http from "../../utils/https";
// import store from "@/vuex/store";
// import {mapGetters} from 'vuex'
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'




import axios from "axios"; // 引用axios
import Cookies from 'js-cookie'
import Bbs from "./bbs";
import Goods from "./goods";
import My from "./my";
export default {
  name: "Home",
  loginusername :"",
   
  components: {
    Bbs,
    Goods,
    My
  },
 computed: {

}, 
 // computed:{
  //   ...mapGetters({
  //     isLogin: state => state.isLogin
  //   })
  // },

  data() {
    return {
      showlogin : true,
      keys: "",
      activeName: "first",
      loginusername:"",
      dialogTableVisible1: false,
      dialogFormVisibleLogin: false,
      formLabelWidth: 100,
      loginError: 0,
      errorMsg: "12312",
      registError: 0,
      dialogFormVisibleRegist: false,
      user: {
        username: "",
        password: "",
        twopassword: ""
      },
      CoupleBack: {
        issue: "",
        phone: ""
      }
    };
  },

  beforeCreate() {},

  created() {},

  beforeMount() {},

  mounted() {
    // http.post({
    //   url:'/api/yjl/user/login',
    //   data: {
    //     username: 'goutian',
    //     password: '1234',
    //   }
    // }).then(res => {
    //   console.log(res)
    // }).catch(err => {
    //   console.log(err)
    // })
  },

  beforeUpdate() {},

  updated() {},

  beforeDestroy() {},

  destroyed() {},

  activated() {},

  deactivated() {},

  methods: {
    onSearch() {
       console.log("123123213");
    },

    coupleBack() {
      this.dialogTableVisible1 = true; //默认页面不显示为false,点击按钮将这个属性变成true
    },

    handleClick(e) {
      console.log(e.index);
      const arr = ["/home/goods", "/home/bbs", "/home/my"];
      if(arr[e.index] == "/home/my"){
        if(this.$store.state.isLogin){

           this.$message.error('请先登录');
           return;
        }
      }

      if (arr[e.index] != this.$route.path) {
        this.$router.replace(arr[e.index]);
      }
    },
    loginOpen() {
      console.log("login");
      this.dialogFormVisibleLogin = true; //默认页面不显示为false,点击按钮将这个属性变成true
    },
    registOpen() {
      this.dialogFormVisibleRegist = true;
    },

    regist() {
      http
        .postJson({
          url: "/yjl/user/regist",
          data: {
            username: this.user.username,
            password: this.user.password,
            twopassword: this.user.twopassword
          }
        })
        .then(res => {
          console.log(res);
          if (res.code != "200") {
            console.log(res);
            this.registError = 1;
            this.errorMsg = res.msg;
            console.log(this.errorMsg);
          } else {
            this.dialogFormVisibleRegist = false;
          }
        });
    },

    submitForm() {
      http
        .postJson({
          url: "/yjl/coupleBack",
          data: {
            issue: this.CoupleBack.issue,
            phone: this.CoupleBack.phone
          }
        })
        .then(res => {
          console.log(res);
          if (res.code != "200") {
            alert("反馈失败");
          } else {
            this.dialogTableVisible1 = false;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    setshowlogin(e){
      alert(e)
      alert(123)
      this.showlogin = e;
    },

    Login() {
      let that = this;
      let config = {
        headers: {
          "Content-Type": "application/json"
        }
      };
      axios
        .post(
          "/yjl/user/login",
          {
            username: this.user.username,
            password: this.user.password
          },
          config
        )
        .then(res => {
          console.log(res);
          if (res.data.code != "200") {
            console.log(123);
            this.loginError = 1;
            this.errorMsg = res.data.msg;
        
            console.log(this.errorMsg);
          } else {
            this.dialogFormVisibleLogin = false;
            this.loginusername = this.user.username;
            console.log( this.loginusername);
            this.showlogin = false;
            console.log(this.user.id)
            Cookies.set('id',res.data.content.id);
            sessionStorage.setItem('isLogin', true)
            // this.$store.getters.setIsLogin()
                   this.$store.dispatch('setIsLogin')

          }
        })
        .catch(function(error) {
          console.log(error);
        });

      //   http
      //     .post({
      //       url: "/api/yjl/user/login",
      //       data: {

      //       },
      //       headers: {
      //         "Content-Type": "multipart/form-data"
      //       }
      //     })
      //     .then(res => {
      //       if (res.code != "200") {
      //         this.loginError = 1;
      //         this.errorMsg = res.msg;
      //       }
      //     })
      //     .catch(err => {
      //       console.log("111" + err.msg);
      //     });
    }
  },

  computed: {},
  components: {}
};
</script>

<style>
/* .el-colo-6{
  display: flex;
} */

.search {
  width: 50%;
}
#home {
  padding-left: 50px;
  padding-right: 50px;
}
</style>
